<template>
  <div>
    <div class="top-btns">
      <a-button @click="methods.onAddItem(null)" type="primary">
        添加顶级
      </a-button>
    </div>
    <div>
      <vxe-table
        :border="'inner'"
        ref="tableRef"
        :column-config="{ resizable: true }"
        :tree-config="{
          transform: true,
          rowField: 'id',
          parentField: 'parentId',
          indent: 8,
        }"
        :row-config="{ keyField: 'id' }"
        :data="curTableData"
      >
        <vxe-column width="40px">
          <template #default>
            <Icon icon="ant-design:holder-outlined" />
          </template>
        </vxe-column>
        <vxe-column field="title" title="标题" tree-node>
          <template #default="{ row, rowid }">
            <a @click="methods.onEditItem(rowid)">{{ row['title'] }}</a>
          </template>
        </vxe-column>
        <vxe-column width="120px" title="操作">
          <template #default="params">
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                操作
                <Icon icon="ant-design:down-outlined" />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="methods.onAddItem(params.row.parentId)">
                    添加平级
                  </a-menu-item>
                  <a-menu-item @click="methods.onAddItem(params.rowid)">
                    添加子级
                  </a-menu-item>
                  <a-menu-item @click="methods.onEditItem(params.rowid)">
                    编辑
                  </a-menu-item>
                  <!-- <a-menu-item @click="methods.onCopyDataKey(params.rowid)">
                    复制数据字段id
                  </a-menu-item> -->
                </a-menu>
              </template>
            </a-dropdown>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a-popconfirm
              title="是否确认删除"
              @confirm="methods.onDeleteItem(params.rowid)"
              placement="topRight"
            >
              <a> 删除 </a>
            </a-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <a-modal
      v-model:open="isEdit"
      title="数据列"
      @ok="methods.onConfirm"
      width="1000px"
      :body-style="{ maxHeight: '600px', overflow: 'auto' }"
      :mask-closable="false"
    >
      <div class="item-edit">
        <a-radio-group
          v-if="!curEditItem?.children?.length"
          v-model:value="addType"
          option-type="button"
          button-style="solid"
          :options="addTypeOptions"
        />
        <template v-if="addType === 'column'">
          <div class="group-title">数据列字段配置</div>
          <a-row :wrap="true" :gutter="[36, 8]">
            <a-col span="12">
              <BwConfigInput v-model:value="curEditItem.title" title="标题" />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.dataKey"
                title="数据字段"
                :options="dataKeyOptions"
              />
            </a-col>
            <a-col span="12">
              <BwConfigInput v-model:value="curEditItem.width" title="宽度" />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.align"
                title="对齐方式"
                :options="[
                  {
                    label: '居左',
                    value: 'left',
                  },
                  {
                    label: '居中',
                    value: 'center',
                  },
                  {
                    label: '居右',
                    value: 'right',
                  },
                ]"
                defaultValue="left"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.lock"
                title="列固定"
                :options="[
                  {
                    label: '无',
                    value: 'none',
                  },
                  {
                    label: '左',
                    value: 'left',
                  },
                  {
                    label: '右',
                    value: 'right',
                  },
                ]"
                defaultValue="none"
              />
            </a-col>
            <a-col span="12">
              <BwConfigInput
                v-model:value="curEditItem.message"
                title="用户提示"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.sortable"
                title="显示排序"
                :defaultValue="true"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.editable"
                title="是否可编辑"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.hidden"
                title="是否隐藏"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.totalColumn"
                title="合计列"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.mergeType"
                v-model:isExpand="curExpandItem.mergeType"
                :isHasExpand="true"
                title="合并类型"
                :options="[
                  {
                    label: '不合并',
                    value: 'none',
                  },
                  {
                    label: '相同合并',
                    value: 'same',
                  },
                ]"
              />
              <template
                v-if="
                  curEditItem.mergeType === BwFilterTableMergeTypeEnum.same &&
                  curExpandItem.mergeType
                "
              >
                <div class="sub">
                  <BwConfigSelect
                    v-model:value="curEditItem.mergeFields"
                    :options="dataKeyOptions"
                    title="合并字段"
                  />
                </div>
              </template>
            </a-col>
            <template
              v-if="
                curEditItem.formatType !== BwFilterTableFormatTypeEnum.custom
              "
            >
              <a-col span="12">
                <BwConfigSwitch
                  v-model:value="curEditItem.linkColumn"
                  :isHasExpand="true"
                  title="链接列"
                  v-model:isExpand="curExpandItem.linkColumn"
                />
                <template
                  v-if="curEditItem.linkColumn && curExpandItem.linkColumn"
                >
                  <div class="sub">
                    <BwConfigSelect
                      v-model:value="curEditItem.linkType"
                      title="链接类型"
                      :options="[
                        {
                          label: '内部页面',
                          value: BwFilterTableLinkTypeEnum.page,
                        },
                        {
                          label: '外部链接',
                          value: BwFilterTableLinkTypeEnum.url,
                        },
                      ]"
                    />
                    <template
                      v-if="
                        curEditItem.linkType === BwFilterTableLinkTypeEnum.page
                      "
                    >
                      <BwConfigSelect
                        v-model:value="curEditItem.linkApp"
                        title="跳转应用"
                        :options="appOptions"
                        @change="methods.onChangeLinkApp"
                      />
                      <BwConfigSelect
                        v-model:value="curEditItem.linkPageType"
                        :options="[
                          {
                            label: '普通表单',
                            value: BwTableLinkPageTypeEnum.normalForm,
                          },
                          {
                            label: '流程表单',
                            value: BwTableLinkPageTypeEnum.flowForm,
                          },
                          {
                            label: '自定义页面',
                            value: BwTableLinkPageTypeEnum.customPage,
                          },
                          {
                            label: '报表',
                            value: BwTableLinkPageTypeEnum.report,
                          },
                          {
                            label: '门户',
                            value: BwTableLinkPageTypeEnum.portal,
                          },
                          {
                            label: '其他',
                            value: BwTableLinkPageTypeEnum.other,
                          },
                        ]"
                        title="访问页面类型"
                        @change="methods.onChangeLinkPageType"
                      />
                      <BwConfigPageSelect
                        v-model:value="curEditItem.linkedPage"
                        :page-type="curEditItem.linkPageType"
                        :link-app="curEditItem.linkApp"
                        title="关联页面选择"
                        @change="methods.onChangeLinkPage"
                      />
                    </template>
                    <BwConfigInput
                      v-model:value="curEditItem.linkUrl"
                      title="访问页面链接"
                    />
                    <BwConfigParams
                      v-model:value="curEditItem.linkParams"
                      :options="dataKeyOptions"
                    />
                    <BwConfigSelect
                      v-model:value="curEditItem.linkMode"
                      :options="[
                        {
                          label: '当前页面跳转',
                          value: 'location',
                        },
                        {
                          label: '新开页面跳转',
                          value: 'open',
                        },
                        {
                          label: '新开页面窗口',
                          value: 'openModal',
                        },
                      ]"
                      title="跳转链接方式"
                    />
                  </div>
                </template>
              </a-col>
            </template>
            <template v-if="!curEditItem.linkColumn">
              <a-col span="12">
                <BwConfigSelect
                  v-model:value="curEditItem.formatType"
                  title="格式化类型"
                  :options="[
                    {
                      label: '原文',
                      value: BwFilterTableFormatTypeEnum.original,
                    },
                    {
                      label: '系统格式化',
                      value: BwFilterTableFormatTypeEnum.systemFormat,
                    },
                    {
                      label: '自定义',
                      value: BwFilterTableFormatTypeEnum.custom,
                    },
                    {
                      label: '插槽',
                      value: BwFilterTableFormatTypeEnum.slot,
                    },
                  ]"
                  :defaultValue="BwFilterTableFormatTypeEnum.original"
                />
              </a-col>
              <a-col
                span="12"
                v-if="
                  curEditItem.formatType ===
                  BwFilterTableFormatTypeEnum.systemFormat
                "
              >
                <BwConfigSelect
                  v-model:data-type="curEditItem.dataType"
                  title="数据类型"
                  :options="[
                    {
                      label: '原文',
                      value: BwFilterTableDataTypeEnum.text,
                    },
                    {
                      label: '超链接',
                      value: BwFilterTableDataTypeEnum.link,
                    },
                    {
                      label: '日期',
                      value: BwFilterTableDataTypeEnum.date,
                    },
                    {
                      label: '千分位',
                      value: BwFilterTableDataTypeEnum.thousands,
                    },
                  ]"
                />
              </a-col>
              <!-- <a-col
                span="24"
                v-if="
                  curEditItem.formatType === BwFilterTableFormatTypeEnum.custom
                "
              >
                <BwCellValueRender
                  v-model:cell-value-render="curEditItem.cellValueRender"
                  :options="dataKeyOptions"
                />
              </a-col> -->
            </template>
          </a-row>

          <div class="group-title">查询项控件配置</div>
          <a-row :wrap="true" :gutter="[36, 0]">
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.notInQuery"
                title="不参与查询"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.field"
                :options="dataKeyOptions"
                @change="methods.onChangeField"
                title="查询字段"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:autoTriggerQuery="curEditItem.autoTriggerQuery"
                title="自动触发查询"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.queryMode"
                title="查询模式"
                :options="[
                  {
                    label: '与',
                    value: '1',
                  },
                  {
                    label: '或',
                    value: '2',
                  },
                ]"
                :defaultValue="'1'"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSwitch
                v-model:value="curEditItem.autoHide"
                title="自动隐藏"
              />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.controlType"
                :data-type="curDataKeyType"
                title="控件类型"
                :options="[
                  {
                    label: '输入框',
                    value: BwFilterTableControlTypeEnum.text,
                  },
                  {
                    label: '多行输入框',
                    value: BwFilterTableControlTypeEnum.textarea,
                  },
                  {
                    label: '数字输入框',
                    value: BwFilterTableControlTypeEnum.number,
                  },
                  {
                    label: '单选框',
                    value: BwFilterTableControlTypeEnum.radio,
                  },
                  {
                    label: '复选框',
                    value: BwFilterTableControlTypeEnum.checkbox,
                  },
                  {
                    label: '下拉选择',
                    value: BwFilterTableControlTypeEnum.select,
                  },
                  {
                    label: '下拉多选',
                    value: BwFilterTableControlTypeEnum.multipleSelect,
                  },
                  {
                    label: '日期',
                    value: BwFilterTableControlTypeEnum.date,
                  },
                  {
                    label: '日期区间',
                    value: BwFilterTableControlTypeEnum.dateRange,
                  },
                  {
                    label: '数字区间',
                    value: BwFilterTableControlTypeEnum.numberRange,
                  },
                  {
                    label: '成员-ID',
                    value: BwFilterTableControlTypeEnum.employeeID,
                  },
                  {
                    label: '部门-ID',
                    value: BwFilterTableControlTypeEnum.departmentID,
                  },
                  {
                    label: '成员-名称',
                    value: BwFilterTableControlTypeEnum.employee,
                  },
                  {
                    label: '部门-名称',
                    value: BwFilterTableControlTypeEnum.department,
                  },
                  {
                    label: '开关',
                    value: BwFilterTableControlTypeEnum.switch,
                  },
                ]"
                :defaultValue="BwFilterTableControlTypeEnum.text"
              />
            </a-col>
            <!-- <a-col
              span="12"
              v-if="
                curEditItem.controlType ===
                  BwFilterTableControlTypeEnum.select ||
                curEditItem.controlType ===
                  BwFilterTableControlTypeEnum.multipleSelect
              "
              ><BwControlProps
                v-model:controlProps="curEditItem.controlProps"
                :control-type="curEditItem.controlType"
            /></a-col> -->
          </a-row>
        </template>
        <template v-else>
          <div class="group-title">分组头信息配置</div>

          <a-row :wrap="true" :gutter="[36, 8]">
            <a-col span="12">
              <BwConfigInput v-model:value="curEditItem.title" title="标题" />
            </a-col>
            <a-col span="12">
              <BwConfigSelect
                v-model:value="curEditItem.align"
                title="对齐方式"
                :options="[
                  {
                    label: '居左',
                    value: 'left',
                  },
                  {
                    label: '居中',
                    value: 'center',
                  },
                  {
                    label: '居右',
                    value: 'right',
                  },
                ]"
              />
            </a-col>
          </a-row>
        </template>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { BwNodeAttrsConstTableColumnConfigProps } from './props'
import { bwUtils } from '/@/utils/main'
import {
  BwFilterTableDataColumnsModel,
  BwFilterTableTreeListFieldsModel,
  TableColumnConfigSelectOptionsModel,
} from './model'
import { api, useAxiosResponse } from '/@/api'
import {
  BwPageResultOutputSysDataObjectAppGetFieldOutput,
  SysApplicationAppGetInfoOuput,
  SysDataSetFieldDataTypeEnum,
} from '@bitwit/tenantapi'
import Sortable from 'sortablejs'
import { cloneDeep, isEqual } from 'lodash-es'
import {
  BwFilterTableControlTypeEnum,
  BwFilterTableDataTypeEnum,
  BwFilterTableFormatTypeEnum,
  BwTableLinkPageTypeEnum,
  BwFilterTableLinkParamsValueTypeEnum,
  BwFilterTableLinkTypeEnum,
  BwFilterTableMergeTypeEnum,
} from './enum'
import { requestMethods } from './util'
import BwConfigInput from '../comItems/input/index.vue'
import BwConfigSelect from '../comItems/select/index.vue'
import BwConfigSwitch from '../comItems/switch/index.vue'
import BwConfigPageSelect from '../comItems/pageSelect/index.vue'
import BwConfigParams from '../comItems/params/index.vue'

export default defineComponent({
  name: 'BwNodeAttrsConstTableColumnConfig',
  components: {
    BwConfigInput,
    BwConfigSelect,
    BwConfigSwitch,
    BwConfigPageSelect,
    BwConfigParams,
  },
  props: BwNodeAttrsConstTableColumnConfigProps,
  emits: ['update:value'],
  setup(props, { emit }) {
    /** 当前表格表头数据 */
    const curTableData = ref<BwFilterTableDataColumnsModel[]>([])
    watch(
      () => props.value,
      (newVal) => {
        curTableData.value = bwUtils.flatArray(newVal, {
          id: 'id',
          parentId: 'parentId',
        })
      },
      { immediate: true, deep: true }
    )

    const onEmit = (value: BwFilterTableDataColumnsModel[]) => {
      emit('update:value', value)
    }

    /** vxe表格实例 */
    const tableRef = ref()

    /** 当前编辑项 */
    const curEditItem = ref({} as BwFilterTableDataColumnsModel)
    /** 当前编辑项Id */
    const curEditId = ref<string | null>(null)

    /** 是否编辑 */
    const isEdit = ref(false)

    /** 当前编辑字段数据类型 */
    const curDataKeyType = ref<SysDataSetFieldDataTypeEnum | undefined>(
      undefined
    )

    const methods = {
      onEditItem(id: string) {
        curEditItem.value = cloneDeep(
          curTableData.value.find((item) => item.id === id) ?? {}
        )
        addType.value = curTableData.value.find((item) => item.parentId === id)
          ? 'group'
          : 'column'
        curEditId.value = id
        isEdit.value = true
      },
      onDeleteItem(id: string) {
        curTableData.value =
          curTableData.value.filter((item) => item.id !== id) ?? []
        nextTick(() => {
          onEmit(
            bwUtils.toTreeArray(
              curTableData.value,
              { id: 'id', parentId: 'parentId' },
              undefined,
              (data) => data
            )
          )
        })
      },
      /** 新建 */
      onAddItem(parentId: string | null = null) {
        const _id = bwUtils.getGuid()
        curEditItem.value = {
          id: _id,
          parentId: parentId,
          align: 'left',
          lock: 'none',
          sortable: true,
          formatType: BwFilterTableFormatTypeEnum.original,
          queryMode: '1',
          controlType: BwFilterTableControlTypeEnum.text,
        }
        addType.value = 'column'
        curEditId.value = null
        isEdit.value = true
      },
      onConfirm() {
        if (!!curEditItem.value.title) {
          isEdit.value = false
          /** 如果没有设置查询字段，默认为当前字段 */
          if (!curEditItem.value.field) {
            curEditItem.value.field = curEditItem.value.dataKey
          }
          /** 如果没有设置查询字段类型，默认为当前字段数据类型 */
          if (!curEditItem.value.fieldDataType) {
            methods.onChangeField(curEditItem.value.field)
          }
          const _index = curTableData.value.findIndex(
            (item) => item.id == curEditId.value
          )
          if (_index > -1) {
            curTableData.value[_index] = cloneDeep(curEditItem.value)
          } else {
            curTableData.value.push(cloneDeep(curEditItem.value))
          }
          nextTick(() => {
            onEmit(
              bwUtils.toTreeArray(
                curTableData.value,
                { id: 'id', parentId: 'parentId' },
                undefined,
                (data) => data
              )
            )
          })
          curEditId.value = null
        } else {
          message.warning('请填写标题')
        }
      },
      /** 初始化数据列 */
      // onInitDataColumns() {
      //   const getStructItemVal = (
      //     constValue: any,
      //     dataType: DataTypeEnum = DataTypeEnum.string,
      //     type: ComAttrValFromTypeEnum = ComAttrValFromTypeEnum.const
      //   ): ComStructItemValFromModel => {
      //     return {
      //       dataType,
      //       type,
      //       constValue,
      //     }
      //   }
      //   const handleData = (
      //     data: BwFilterTableTreeListFieldsModel[],
      //     parentId: Nullable<string> = null
      //   ) => {
      //     return data
      //       .filter((item) => !item.disabled || item.children?.length)
      //       .map((item) => {
      //         const _id = bwUtils.getGuid()
      //         const res: BwFilterTableDataColumnsModel = {
      //           id: _id,
      //           parentId: parentId,
      //           title: getStructItemVal(item.label),
      //           dataKey: getStructItemVal(
      //             item.children?.length ? undefined : item.value
      //           ),
      //           width: getStructItemVal('100px'),
      //           autoHide: getStructItemVal(true, DataTypeEnum.boolean),

      //           fieldDataType: getStructItemVal(
      //             item.dataType,
      //             DataTypeEnum.number
      //           ),
      //           children: handleData(item.children ?? [], _id),
      //         }
      //         if (item.dataType === SysDataSetFieldDataTypeEnum.NUMBER_2) {
      //           res.formatType = getStructItemVal(
      //             BwFilterTableFormatTypeEnum.systemFormat
      //           )
      //           res.dataType = getStructItemVal(
      //             BwFilterTableDataTypeEnum.date
      //           )
      //           res.controlType = getStructItemVal(
      //             BwFilterTableControlTypeEnum.dateRange
      //           )
      //         } else if (
      //           item.dataType === SysDataSetFieldDataTypeEnum.NUMBER_3 ||
      //           item.dataType === SysDataSetFieldDataTypeEnum.NUMBER_4
      //         ) {
      //           res.formatType = getStructItemVal(
      //             BwFilterTableFormatTypeEnum.systemFormat
      //           )
      //           res.dataType = getStructItemVal(
      //             BwFilterTableDataTypeEnum.thousands
      //           )
      //           res.controlType = getStructItemVal(
      //             BwFilterTableControlTypeEnum.numberRange
      //           )
      //         }

      //         return res
      //       })
      //   }
      //   curTableData.value = bwUtils.flatArray(
      //     handleData(dataKeyOptions.value),
      //     {
      //       id: 'id',
      //       parentId: 'parentId',
      //     }
      //   )
      //   nextTick(() => {
      //     onEmit(
      //       bwUtils.toTreeArray(
      //         curTableData.value,
      //         { id: 'id', parentId: 'parentId' },
      //         undefined,
      //         (data) => data
      //       )
      //     )
      //   })
      // },
      /** 初始化表格拖动列排序 */
      onInitRowDrag() {
        nextTick(() => {
          const $table = tableRef.value
          if ($table) {
            const sortable = new Sortable(
              $table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'),
              {
                group: 'refTable',
                animation: 150,
                dataIdAttr: 'rowid',
                onMove: ({ dragged, related }) => {
                  const dragElClassList: string[] = []
                  dragged.classList.forEach((element: string) => {
                    if (element.includes('row--level')) {
                      dragElClassList.push(element)
                    }
                  })
                  const relatelClassList: string[] = []
                  related.classList.forEach((element: string) => {
                    if (element.includes('row--level')) {
                      relatelClassList.push(element)
                    }
                  })
                  // 不同层级的不能互相拖动
                  if (!isEqual(dragElClassList, relatelClassList)) return false
                  return true
                },
                onEnd: ({ newIndex, oldIndex }) => {
                  if (newIndex === oldIndex) return
                  const sortIds = sortable.toArray() ?? []
                  const newArray: BwFilterTableDataColumnsModel[] = []
                  sortIds.forEach((id) => {
                    const item = curTableData.value.find(
                      (item) => item.id === id
                    )
                    item && newArray.push(item)
                  })
                  newArray.push(
                    ...curTableData.value.filter(
                      (item) => item.id && !sortIds.includes(item.id)
                    )
                  )
                  // curTableData.value = []
                  nextTick(() => {
                    curTableData.value = newArray
                    onEmit(
                      bwUtils.toTreeArray(
                        curTableData.value,
                        { id: 'id', parentId: 'parentId' },
                        undefined,
                        (data) => data
                      )
                    )
                  })
                },
              }
            )
          }
        })
      },

      /** 根据当前字段数据类型改变可选控件类型 */
      onChangeControlType(type?: SysDataSetFieldDataTypeEnum) {
        curDataKeyType.value = type
      },
      onChangeLinkApp(linkApp: string) {
        curEditItem.value.linkPageType = undefined
        curEditItem.value.linkedPage = undefined
        curEditItem.value.linkUrl = undefined
        curEditItem.value.linkParams = undefined
      },
      onChangeLinkPageType(linkPageType: string) {
        const curPageType = linkPageType
        /** 跳转页面url */
        let url = ''
        let appCode = ':appCode'
        let pageCode = ':pageCode'
        switch (curPageType) {
          case BwTableLinkPageTypeEnum.normalForm:
            url = `/detail/${appCode}/normalForm/${pageCode}`
            break

          case BwTableLinkPageTypeEnum.flowForm:
            url = `/detail/${appCode}/flowForm/${pageCode}`
            break

          case BwTableLinkPageTypeEnum.customPage:
            url = `/${appCode}/${pageCode}`
            break

          case BwTableLinkPageTypeEnum.report:
            url = `/${appCode}/${pageCode}`
            break

          case BwTableLinkPageTypeEnum.portal:
            url = `/${appCode}/${pageCode}`
            break

          case BwTableLinkPageTypeEnum.other:
            url = ``
            break

          default:
            url = ''
        }
        curEditItem.value.linkedPage = undefined
        curEditItem.value.linkUrl = url
      },
      onChangeLinkPage(linkPage: string) {
        let _linkPageType = curEditItem.value.linkPageType
        /** 当跳转页面详情页时添加dataId参数 */
        if (_linkPageType !== BwTableLinkPageTypeEnum.other) {
          let appCode = ''
          const linkAppId = curEditItem.value.linkApp
          api
            // .apiSysSettingInfoGet('0', linkAppId)
            .apiSysApplicationInfoGet(linkAppId)
            .then((res) => {
              const resData =
                useAxiosResponse<SysApplicationAppGetInfoOuput>(res)
              appCode =
                resData?.code ?? resData?.id?.toString() ?? linkAppId ?? ''
            })
            .catch((err) => {
              console.error(err)
            })
            .finally(() => {
              const routeParams = [
                {
                  key: 'appCode',
                  value: appCode ?? linkAppId,
                  valueType: BwFilterTableLinkParamsValueTypeEnum.custom,
                },
                {
                  key: 'pageCode',
                  value: linkPage,
                  valueType: BwFilterTableLinkParamsValueTypeEnum.custom,
                },
              ]
              curEditItem.value.linkParams = routeParams
            })
        }
      },
      /** 复制数据字段id */
      onCopyDataKey(id: string) {
        const content: string =
          curTableData.value.find((item) => item.id === id)?.dataKey ?? ''
        if (content) {
          try {
            const dom = document.createElement('input')
            dom.value = content
            document.body.appendChild(dom)
            dom.select()
            document.execCommand('copy')
            document.body.removeChild(dom)
            message.success('复制成功')
          } catch (err) {
            console.error(err)
            message.error('复制失败')
          }
        } else {
          message.warning('没有内容')
        }
      },
      /** 改变查询字段 */
      onChangeField(field?: string) {
        const _field = field ?? ''

        const fieldDataType = bwUtils.findTree(dataKeyOptions.value, _field, {
          id: 'value',
        })?.dataType

        curEditItem.value.fieldDataType = fieldDataType
      },
      /** 获取数据字段类型 */
      getDataKeyOptions(dataObjectId?: string | number) {
        return new Promise((resolve, reject) => {
          api
            .apiSysDataObjectGetFieldsPost({
              dataObjectId: dataObjectId?.toString(),
            })
            .then((res) => {
              const resData =
                useAxiosResponse<BwPageResultOutputSysDataObjectAppGetFieldOutput>(
                  res
                )
              dataKeyOptions.value =
                resData?.rows
                  ?.filter((item) => item.id)
                  ?.map((item) => {
                    return {
                      label: item.code ?? '未命名字段',
                      value: item.id ?? '',
                    }
                  }) ?? []
              resolve(resData)
            })
            .catch((err) => {
              reject(err)
            })
        })
      },
    }

    /** 数据字段列表 */
    const dataKeyOptions = ref<BwFilterTableTreeListFieldsModel[]>([])
    watch(
      () => props.dataObjId,
      (newVal) => {
        // getDataColumnsInfo(appId, pageId).then((res) => {
        //   dataKeyOptions.value = res
        // })
        methods.getDataKeyOptions(newVal)
      },
      { immediate: true }
    )

    /** 应用列表 */
    const appOptions = ref<TableColumnConfigSelectOptionsModel[]>([])

    /** 添加类别 分组头或数据列 */
    const addType = ref<'group' | 'column'>('column')
    const addTypeOptions = [
      {
        label: '数据列',
        value: 'column',
      },
      {
        label: '分组头',
        value: 'group',
      },
    ]

    /** 当前展开项 */
    const curExpandItem = reactive({
      mergeType: true,
      linkColumn: true,
    })

    onMounted(() => {
      methods.onInitRowDrag()
      requestMethods.onGetAppList().then((appList) => {
        appOptions.value = appList
      })
    })

    return {
      isEdit,
      curEditItem,
      methods,
      curTableData,
      tableRef,
      addType,
      addTypeOptions,
      curDataKeyType,
      dataKeyOptions,
      curExpandItem,

      appOptions,

      // isConfigSlot,
      // tableSlots,

      BwTableLinkPageTypeEnum,
      BwFilterTableMergeTypeEnum,
      BwFilterTableFormatTypeEnum,
      BwFilterTableLinkTypeEnum,
      BwFilterTableControlTypeEnum,
      BwFilterTableDataTypeEnum,
    }
  },
})
</script>

<style lang="less" scoped>
.item-edit {
  padding: 24px;
  overflow: hidden;

  .group-title {
    font-size: 18px;
    font-weight: 500;
    margin: 12px 0;
  }

  .sub {
    background: #edeff3;
    border-radius: 3px;
    margin: 8px;
  }
}
</style>
